<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Qunee Graph Editor V2.0</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel=stylesheet href=libs/bootstrap/css/bootstrap.css>
    <!--<link rel=stylesheet href=libs/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css>-->
    <!-- build:css libs/graph.editor/graph.editor.css -->
    <link rel="stylesheet" href="src/css/graph.editor.css"/>
    <!-- endbuild -->

    <!-- build:css styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
</head>
<body class="layout">
<!--<header data-options="region:'north', height: '50'">-->
<!--<a class="navbar-brand" href="http://qunee.com">-->
<!--<div class="logo" title="qunee.com"></div>-->
<!--</a>-->
<!--<span id="title">Light High Efficiency Graph Component</span>-->
<!--<ul class="nav navbar-nav navbar-right">-->
<!--<li><a href="http://qunee.com">Home</a></li>-->
<!--<li><a href="http://blog.qunee.com">Blog</a></li>-->
<!--<li><a href="http://doc.qunee.com">Doc</a></li>-->
<!--<li><a href="http://demo.qunee.com">Demo</a></li>-->
<!--&lt;!&ndash;<li><a href="http://qunee.com#try">试用</a></li>&ndash;&gt;-->
<!--<li class="active"><a href="http://demo.qunee.com/editor/">Editor</a></li>-->
<!--<li class="new"><a href="http://demo.qunee.com/svg2canvas/">SVG2Canvas</a></li>-->
<!--</ul>-->
<!--</header>-->
<div id="editor" class="graph-editor" data-options="region:'center'"></div>
<footer data-options="region:'south', height: '30'" class="footer">
    Copyright © 2016 上海酷利软件有限公司 Shanghai Kuli Software Co.,Ltd. All right reserved. Email: <span
        style="color: #2898E0;">support#qunee.com</span>
</footer>
<!-- build:js libs/js.js -->
<script src="libs/jquery.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script src="libs/layout.border.js"></script>
<!--<script src="libs/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>-->
<!-- endbuild -->

<script src="http://demo.qunee.com/lib/qunee-min.js?v=1.8"></script>

<!-- build:js libs/graph.editor/graph.editor.js -->
<script src="src/common/i18n.js"></script>
<script src="src/common/DomSupport.js"></script>
<script src="src/common/DragSupport.js"></script>
<script src="src/common/FileSupport.js"></script>
<script src="src/common/JSONSerializer.js"></script>
<script src="src/common/ExportPane.js"></script>
<script src="src/common/Toolbar.js"></script>
<script src="src/common/ToolBox.js"></script>
<script src="src/common/PopupMenu.js"></script>
<!--<script src="src/common/PropertyPane.js"></script>-->
<script src="src/common/GridBackground.js"></script>
<script src="src/graph.editor.js"></script>
<!-- endbuild -->

<!-- build:js scripts/main.js -->
<script src="scripts/graphs.js"></script>
<script>
    Q.registerImage('lamp', Q.Shapes.getShape(Q.Consts.SHAPE_CIRCLE, -8, -8, 16, 16));

    var BarUI = function(data){
        Q.doSuperConstructor(this, BarUI, arguments);
    }

    BarUI.prototype = {
        width: 100,
        height: 12,
        measure: function(){
            this.setMeasuredBounds(this.width, this.height);
        },
        draw: function(g, scale, selected){
            var value = this.data * 100 | 0;
            var data = this.data;
            if(data > 1){
                data = 1;
            }else if(data < 0){
                data = 0;
            }
            var color;
            if(value < 40){
                color = "#0F0";
            }else if(value < 70){
                color = "#FF0";
            }else{
                color = "#F00";
            }
            g.fillStyle = color;
            var w = data * this.width;
            g.fillRect(0, 0, w, this.height);
            g.beginPath();
            g.strokeStyle = "#CCC";
            g.strokeRect(0, 0, this.width, this.height);
            g.fillStyle = "#555";
            g.textBaseline = "middle";
            if(value > 83){
                g.textAlign = "right";
                g.fillText(value, this.width - 1, this.height / 2);
                return;
            }
            g.fillText(value, w + 3, this.height / 2);
        }
    }
    Q.extend(BarUI, Q.BaseUI);
    Q.BarUI = BarUI;
    Q.loadClassPath(BarUI, 'Q.BarUI');

    function formatNumber(number, decimal, unit){
        return number.toFixed(decimal) + unit;
    }

    function CustomServerNode(name, id, image, data){
        data = data || {cpu: Math.random(), memory: Math.random(), incoming: Math.random(), outgoing: Math.random()}
        Q.doSuperConstructor(this, CustomServerNode);

        this.init(name, id, image);

        this.set("cpu", data.cpu);
        this.set("memory", data.memory);
        this.set("incoming", formatNumber(data.incoming, 2, "GB"));
        this.set("outgoing", formatNumber(data.outgoing, 2, "GB"));

    }
    var w = 140, h = 120, r = 10;
    CustomServerNode.prototype = {
        _showDetail: true,
        iconSize: {width: 23},
        shape: Q.Shapes.getRect(-w/2, -h/2, w, h, r, r),
        init: function(name, id, image){
            this.set("image", image);
            this.set("id", id);
            this.set("name", name);
            this.name = "Double click show detail";

            this.image = this.shape;
            var gradient = new Q.Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, ["#F4F4F4", "#FFFFFF", "#DFDFDF", "#E9E9E9"]);
            gradient.angle = Math.PI / 2;
            this.setStyle(Q.Styles.SHAPE_FILL_GRADIENT, gradient);
            this.setStyle(Q.Styles.SHAPE_STROKE, 0);
            this.setStyle(Q.Styles.SHAPE_OUTLINE, 1);
            this.setStyle(Q.Styles.SHAPE_OUTLINE_STYLE, "#C9C9C9");
            this.setStyle(Q.Styles.LAYOUT_BY_PATH, false);

            function addUIAt(node, ui, x, y, bindingProperty, value){
                ui.syncSelection = false;
                ui.zIndex = 1;
                ui.position = {x: x, y: y};
                ui.anchorPosition = Q.Position.LEFT_TOP;
                ui.fontSize = 10;
                var binding;
                if(bindingProperty){
                    binding = {
                        property : bindingProperty,
                        propertyType : Q.Consts.PROPERTY_TYPE_CLIENT,
                        bindingProperty : "data"
                    }
                }
                node.addUI(ui, binding);
                return ui;
            }

            var icon = new Q.ImageUI(image);
            icon.size = this.iconSize;
            addUIAt(this, icon, 15, 12, "icon").anchorPosition = Q.Position.CENTER_MIDDLE;

            addUIAt(this, new Q.LabelUI(name), 30, 5);
            addUIAt(this, new Q.LabelUI(id), 30, 22).color = "#D00";

            addUIAt(this, new Q.LabelUI("CPU"), 27, 47).anchorPosition = Q.Position.RIGHT_MIDDLE;
            addUIAt(this, new Q.LabelUI("MEM"), 27, 65).anchorPosition = Q.Position.RIGHT_MIDDLE;
            addUIAt(this, new BarUI(), 30, 47, "cpu").anchorPosition = Q.Position.LEFT_MIDDLE;
            addUIAt(this, new BarUI(), 30, 65, "memory").anchorPosition = Q.Position.LEFT_MIDDLE;

            addUIAt(this, new Q.LabelUI("Incoming:"), 71, 90).anchorPosition = Q.Position.RIGHT_MIDDLE;
            addUIAt(this, new Q.LabelUI("Outgoing:"), 71, 106).anchorPosition = Q.Position.RIGHT_MIDDLE;
            var ui = addUIAt(this, new Q.LabelUI(), 75, 90, "incoming");
            ui.anchorPosition = Q.Position.LEFT_MIDDLE;
            ui.color = "#C20";
            ui = addUIAt(this, new Q.LabelUI(), 75, 106, "outgoing");
            ui.anchorPosition = Q.Position.LEFT_MIDDLE;
            ui.color = "#C20";
        }
    }
    Q.extend(CustomServerNode, Q.Node);

    Object.defineProperties(CustomServerNode.prototype, {
        showDetail: {
            get: function(){
                return this._showDetail;
            },
            set: function(show){
                if(this._showDetail == show){
                    return;
                }
                this._showDetail = show;

                this.image = show ? this.shape : this.get("image");
                this.name = show ? getI18NString('Double click merge') : (this.get("name") + "\n" + this.get("id"));
                var uis = this.bindingUIs;
                if(uis){
                    uis.forEach(function(ui){
                        ui.ui.visible = show;
                    })
                    this.invalidate();
                }
            }
        }
    })

    function ondropLoadJSON(evt, graph, center, options) {
        var url = options.url;
        if (!url) {
            return;
        }
        loadTopoByURL(graph, url, center);
    }

    function loadTopoByURL(graph, url, center) {
        Q.loadJSON(url, function (json) {
            var result = graph.parseJSON(json);
            if (!result) {
                return
            }
            var bounds = new Q.Rect();
            result.forEach(function (e) {
                if (e.location) {
                    bounds.add(e.location);
                }
            })

            if (bounds.isEmpty()) {
                return;
            }
            var xOffset = center.x - bounds.cx;
            var yOffset = center.y - bounds.cy;

            result.forEach(function (e) {
                if (e.location) {
                    e.x += xOffset;
                    e.y += yOffset;
                }
            })
        })
    }

    function ondropCustomServerNode(evt, graph, center, options){
        var node = new CustomServerNode(options.name, options.id, options.icon || 'Q-node', options.data)
        node.location = center;
        graph.addElement(node);
    }

    $('#editor').graphEditor({
        images: [{
            name: '单个节点',
            images: [{
                image: './images/custom_node.png',
                ondrop: 'ondropCustomServerNode',
            },{
                image: graphs.iphone,
                label: 'iphone',
                properties: {size: {width: 100}}
            },{
                image: graphs.skype,
                properties: {size: {width: 100}}
            }, graphs.twitter]
        }, {
            name: '节点组合', images: [{
                image: 'images/topo2.png',
                url: './data/topo2.json',
                ondrop: 'ondropLoadJSON'//do any thing by your self when drop into the graph

            }, {
                image: 'images/topo3.png',
                url: './data/topo3.json',
                ondrop: 'ondropLoadJSON'//do any thing by your self when drop into the graph

            }, {
                image: 'images/group.png',
                name: '11',
                ondrop: 'createGroup',
                width: 100, //也可以传入一些参数,但只能是string,number等简单类型
                height: 300

            }]
        }], callback: function (editor) {
            editor.toolbox.hideDefaultGroups();
            var graph = editor.graph;
            graph.editable = false;
            graph.originAtCenter = false;

            graph.popupmenu.getMenuItems = function (graph, data, evt) {
                var result = Q.PopupMenu.prototype.getMenuItems.apply(this, arguments);
                result.unshift(Q.PopupMenu.Separator);
                result.unshift({
                    text: '自定义菜单项', action: function () {
                        alert('menu be clicked')
                    }
                })
                if(data instanceof CustomServerNode){
                    result.unshift({
                        text: '设置CPU', action: function () {
                            Q.prompt(getI18NString('Input CPU'), data.get('cpu') || '', function (value) {
                                if (value === null) {
                                    return;
                                }
                                data.set("cpu", parseFloat(value));
                            })
                        }
                    })
                }
                return result;
            }
        }
    });
</script>
<!-- endbuild -->
</body>
</html>
